<template>
	<view class="page">
		<view class="bar_info" :style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx'}">
			<view class="title_bar">
				<view class="title_bar_left" @tap.stop="handleJump" data-type="BACK">
					<image class="title_bar_left_icon" :src='STATIC_URL+"5.png"'></image>
				</view>
				<view class="title_bar_center">
					商品详情
				</view>
				<view class="title_bar_right"></view>
			</view>
		</view>
		<!-- <view :style="{height: (88+StatusBarRpx)+'rpx'}"></view> -->
		<view class="loading_css" v-if="isShow">
			<u-loading size="36" color="#41AF36"></u-loading>
			<view class="loading_text">加载中</view>
		</view>
		<template v-else>
			<view class="">
				<u-swiper :list="imgList" height="719" mode="number" indicator-pos="bottomRight"></u-swiper>
			</view>
			<view class="detail_info">
				<view class="price_text" v-if="user.is_show_price == 1">
					<text class="price_1">￥</text>
					<text class="price_2">{{detailsInfo.price}}</text>
					<text class="price_3">/{{filterDictionary(detailsInfo.unit)}}</text>
				</view>
				<view class="shop_name">{{detailsInfo.name}}</view>
				<view class="shop_bg flex">
					<view class="shop_bg_le">
						<image :src='STATIC_URL+"24.png"' mode=""></image>
					</view>
					<view class="shop_bg_ri">
						<view class="information_1">商品信息</view>
						<view class="information_2">品牌：{{detailsInfo.brand ? detailsInfo.brand : '无'}}</view>
						<view class="information_2" v-if="detailsInfo.specification">规格：{{detailsInfo.specification}}</view>
						<view class="information_2">单位：{{filterDictionary(detailsInfo.unit)}}</view>
						<view class="information_2" v-if="detailsInfo.remark">备注：{{detailsInfo.remark}}</view>
						
						<!-- <view class="information_2">产地：山东烟台果蔬农贸食品有限公司</view> -->
					</view>
				</view>
			</view>
			<view class="cart_bom flex align-center justify-between">
				<view class="bom_le flex align-center">
					<view class="bom_le_1" @tap.stop="getCollection">
						<template v-if="detailsInfo.is_collect == 0">
							<image :src='STATIC_URL+"35.png"' mode="aspectFill"></image>
							<view>收藏</view>
						</template>
						<template v-else>
							<image :src='STATIC_URL+"43.png"' mode="aspectFill"></image>
							<view>已收藏</view>
						</template>
						
					</view>
					<view class="bom_le_1" style="margin-left: 40rpx;" @tap.stop="goCart">
						<image :src='STATIC_URL+"36.png"' mode="aspectFill"></image>
						<view>购物袋</view>
						<view class="cart_num flex align-center justify-center" v-if="cartNum > 0">{{cartNum}}</view>
					</view>
					
				</view>
				<view class="bom_ri flex align-center justify-center" @tap.stop="changeNum">加入购物车</view>
			</view>
			<view style="height: 120rpx;"></view>
		</template>
		<cart-popup :source="1" ref="cart" :item="shopItemInfo"></cart-popup>
	</view>
</template>

<script>
	import cartPopup from "@/components/cartPopup/cartPopup.vue"
	import {
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				id: "",
				isShow: true,
				detailsInfo: {},
				imgList: [],
				type: 1,
				shopItemInfo: "",
				cartNum: 0,
				user: {},
			}
		},
		components: {
			cartPopup
		},
		computed: {
			...mapState(['cartList'])
		},
		watch: {
			// 监听vuex中的数据
			cartList(newValue, oldValue) {
				this.cartNum = newValue.length;
				this.getDetails();
			}
		},
		onLoad(options) {
			let {id} = options;
			if (id !== undefined) this.id = id;
			this.getDetails();
		},
		onShow() {
			this.user = global.userInfo;
		},
		methods: {
			// 获取商品详情  gylShopDetails
			getDetails() {
				this.$api.get(global.apiUrls.gylShopDetails, {
					product_id: this.id
				}).then(res => {
					// console.log(res);
					this.isShow = false;
					if (res.data.code == 200) {
						this.detailsInfo = res.data.data;
						this.imgList = [];
						this.imgList.push(res.data.data.image);
						if (res.data.data.is_collect == 0) {
							this.type = 1;
						} else {
							this.type = 2;
						}
						this.cartNum = this.$store.state.cartList.length;
						let cartList = this.$store.state.cartList;
						if (cartList.length > 0) {
							cartList.forEach((v, k) => {
								if (v.id == this.detailsInfo.id) {
									this.detailsInfo.count = v.count;
								}
							})
						}
					} else {
						this.$message.info(res.data.message);
					}
				})
			},
			// 商品收藏  gylAddCollection
			getCollection() {
				this.$api.post(global.apiUrls.gylAddCollection, {
					product_id: this.id,
					type: this.type
				}).then(res => {
					this.$message.info(res.data.message);
					if (res.data.code == 200) {
						this.getDetails();
					}
				})
			},
			changeNum() {
				this.shopItemInfo = {
					brand: this.detailsInfo.brand,
					business_id: this.detailsInfo.business_id,
					category_parent_id: this.detailsInfo.category_parent_id,
					count: this.detailsInfo.count,
					id: this.detailsInfo.id,
					image: this.detailsInfo.image,
					name: this.detailsInfo.name,
					price: this.detailsInfo.price,
					unit: this.detailsInfo.unit
				};
				this.$refs.cart.openCart();
			},
			goCart() {
				uni.switchTab({
					url: '/pages/tabbar/share'
				})
			},
			filterDictionary() {
				let item = global.dictionary.filter(item => item.id == this.detailsInfo.unit);
				if (item.length > 0) {
					return item[0].name;
				} else {
					return "未知";
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		width: 100vw;
		overflow-x: hidden;
		min-height: calc(100vh - var(--window-bottom));
		background: #fff;
		background-size: 100% auto;
	}

	.bar_info {
		width: 750rpx;
		height: 88rpx;
		overflow: hidden;
		z-index: 10;
		position: fixed;
		top: 0rpx;

		.title_bar {
			padding: 0 32rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.title_bar_left {
				width: 50rpx;

				.title_bar_left_icon {
					width: 18rpx;
					height: 32rpx;
				}
			}

			.title_bar_center {
				line-height: 88rpx;
				font-size: 36rpx;
				font-weight: 400;
			}

			.title_bar_right {
				width: 50rpx;
			}
		}
	}
	/deep/.u-swiper-indicator {
		bottom: 153rpx !important;
	}
	/deep/.u-indicator-item-number {
		padding: 6rpx 32rpx !important;
	}
	.detail_info {
		border-radius: 40rpx 40rpx 0 0;
		padding: 30rpx;
		transform: translateY(-123rpx);
		background: #fff;
		.price_text {
			.price_1 {
				color: #D43C3B;
				font-size: 30rpx;
				font-weight: 600;
			}
			.price_2 {
				color: #D43C3B;
				font-size: 50rpx;
				font-weight: 600;
			}
			.price_3 {
				color: #989898;
				font-size: 30rpx;
				font-weight: 500;
			}
			.price_4 {
				color: #989898;
				font-size: 28rpx;
				font-weight: 500;
				float: right;
				margin-left: 24rpx;
			}
		}
		.shop_name {
			margin: 10rpx 0 28rpx 0;
			font-weight: 500;
			font-size: 36rpx;
			color: #3D3D3D;
			padding-bottom: 20rpx;
			border-bottom: 1px solid #eee;
		}
		.shop_bg {
			padding: 20rpx;
			width: 690rpx;
			height: 240rpx;
			background: url(https://www.shiyaocanyin.com/images/34.png) no-repeat;
			background-size: 100% 100%;
			.shop_bg_le {
				width: 33rpx;
				padding-top: 8rpx;
				image {
					width: 33rpx;
					height: 33rpx;
				}
			}
			.shop_bg_ri {
				width: calc(100% - 33rpx);
				padding: 0 0 0 8rpx;
				.information_1 {
					font-weight: 700;
					font-size: 32rpx;
					color: #3D3D3D;
					margin-bottom: 12rpx;
				}
				.information_2 {
					font-weight: 400;
					font-size: 24rpx;
					color: #666666;
					margin-top: 8rpx;
				}
			}
		}
	}
	.cart_bom {
		width: 750rpx;
		height: 110rpx;
		background: #fff;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 10;
		padding: 15rpx 30rpx;
	
		.bom_le {
			.bom_le_1 {
				font-weight: 400;
				font-size: 24rpx;
				color: rgba(61,61,61,0.7);
				text-align: center;
				position: relative;
				image {
					width: 40rpx;
					height: 40rpx;
				}
			}
			.cart_num {
				width: 27rpx;
				height: 27rpx;
				background: #D43C3B;
				font-size: 20rpx;
				color: #fff;
				border-radius: 50%;
				position: absolute;
				top: -8rpx;
				right: 10rpx;
				z-index: 10;
			}
		}
	
		.bom_ri {
			width: 500rpx;
			height: 80rpx;
			background: #41AF36;
			border-radius: 50rpx;
			font-weight: 500;
			font-size: 30rpx;
			color: #FFFFFF;
		}
	}
</style>